<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div class="app-container" v-loading="loading">
    <thread-form :item="currentItem" :show="show" @change="changeHandle" :pid="postId" />
    <assign-to-broker :broker-id="currentItem.broker_id" :pid="postId" ref="assign" @submit="submitAssignHandle" />

    <el-card>
      <div class="myheader">
        <div class="part-left">
          <div class="block">
            <el-input v-model="kw" style="border-radius: 100%; width: 150px" size="small" placeholder="搜索关键词">
              <el-button slot="append" icon="el-icon-search" @click="doSearch" />
            </el-input>
            <el-button v-if="kw" type="text" size="small" @click="clearKw">清空</el-button>
          </div>
          <div class="block">
            <EnumerationSelector :radio="true" v-model="scope" cat="clue_scope"></EnumerationSelector>
          </div>

          <div class="block">
          </div>
        </div>
        <div class="right">

          <el-button :disabled="loading" icon="el-icon-refresh" size="small" type="default" plain
            @click="loadData">刷新</el-button>



          <el-button size="small" type="primary" icon="el-icon-plus" @click="newHandle">新建线索</el-button>

        </div>
      </div>
      
      <el-divider></el-divider>

      <el-table :data="items" highlight-current-row>
        <el-table-column prop="id" label="ID" width="80"/>
        <el-table-column prop="name" label="客户姓名" width="120"/>
        <el-table-column prop="mobile" label="客户电话" width="120"/>
        <el-table-column prop="post_title" label="归属项目" />
        <el-table-column prop="source" label="来源">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.source" placement="top">
              <div class="content">{{scope.row.source}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="expired_at" label="回收时间" width="160"/>

        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.status == 0">未指派</el-tag>
            <span v-else>{{ scope.row.status == 1 ? "已领取" : "已分配" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" :width="120">
          <template slot-scope="scope">
            <el-link type="primary" @click="assignHandle(scope.row)"
              :disabled="scope.row.broker_id ? true : false">指派顾问</el-link>
            <el-link type="primary" @click="editHandle(scope.row)">管理</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination hide-on-single-page background layout="total, sizes, prev, pager, next, jumper" :total="total"
          :page-sizes="[10, 20, 50, 100]" :page-size="per_page" @current-change="updateCurrentPage"
          @size-change="updatePageSize" />
      </div>
    </el-card>

  </div>
</template>

<script>
import {
  getThreadList,
  deleteThread,
  assignThread,
} from "@/api/thread";
import threadForm from "./threadForm.vue";
import EnumerationSelector from "@/components/EnumerationSelector/Index.vue";
import AssignToBroker from "@/components/AssignToBroker";
import PostSelector from "@/components/PostSelector";
export default {
  name: "threads",
  components: { threadForm, EnumerationSelector, PostSelector, AssignToBroker },
  data() {
    return {
      kw: "",
      total: 0,
      per_page: 20,
      currentItem: {},
      page: 1,
      items: [],
      loading: false,
      postId: null,
      scope: "public_items",
      show: false
    };
  },
  created() {
    var id = this.$route.params.id;
    this.postId = parseInt(id);
  },
  props: {},

  computed: {},

  watch: {
    current_page: function (newVal, oldVal) {
      this.loadData();
    },
    per_page: function (newVal, oldVal) {
      this.loadData();
    },
    scope: {
      handler(newValue, oldValue) {
        this.page = 1;
        this.loadData();
      },
    },
    postId: {
      handler(newValue, oldValue) {
        this.page = 1;
        this.loadData();
      },
    },
  },

  mounted() {
    // this.loadData()
  },

  methods: {
    changeHandle() {
      this.show = false;
      this.loadData()
    },
    doSearch: function () {
      // 搜索
      this.loading = true;
      this.page = 1;
      this.loadData();
    },
    clearKw: function () {
      this.kw = "";
      this.page = 1;
      this.loadData();
    },
    updateCurrentPage: function (page) {
      this.page = page;
      this.loadData();
    },
    updatePageSize: function (size) {
      this.per_page = size || 10;
    },


    newHandle: function () {
      this.loading = false;
      this.currentItem = {}
      this.show = true
    },

    editHandle: function (item) {
      this.loading = false;
      this.currentItem = item
      this.show = true
    },

    deleteHandle: function (itemId) {
      var _this = this;
      this.$confirm("确定要删除这条线索吗?", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteThread(itemId).then((resp) => {
          _this.currentItem = {};
          _this.loadData();
        });
      });
    },

    assignHandle: function (item) {
      this.loading = false;
      this.$refs.assign.showDialog = true;
      this.currentItem = item;
    },

    submitAssignHandle: function (brokerId) {
      var data = {
        id: this.currentItem.id,
        broker_id: brokerId,
      };
      this.$refs.assign.showDialog = false;
      assignThread(data.id, data.broker_id).then((resp) => {
        this.loading = false;
        this.loadData();
        if (resp.status != 0) {
          return;
        }
        this.$message.success("已指派给顾问,并短信通知");
      });
    },


    loadData() {
      this.loading = true;
      var data = {
        page: this.page,
        per_page: this.per_page,
        scope: this.scope
      }
      if (this.kw) {
        data.kw = this.kw
      }
      if (this.postId) {
        data.post_id = this.postId
      }
      getThreadList(data).then((resp) => {
        if (resp.status != 0) {
          return
        }
        this.items = resp.data.result
        this.total = resp.data.page.total_items
        this.loading = false;
      })
    },
  }
};
</script>

<style scoped>
.inline {
  display: flex;
  justify-content: space-between;
}

.myheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.myheader .part-right {
  display: flex;
  justify-content: flex-end;
}

.part-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.part-left .block {
  margin-right: 20px;
}
.content{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>